// <!--
//  * Copyright ©
//  * #  
//  * @author: zw
//  * @date: 2021-09-02 
//  -->

import { defineComponent, reactive } from 'vue'
import './css/Selector.scss';
import SelectorInput from './Input'
import SelectorMenu from './Menu'
import focus from '../../directives/focus'
export default defineComponent({
  name: 'Selector',
  components: { SelectorInput, SelectorMenu },
  props: { placeholder: { type: String, default: '请选择' }, data: { type: Array, default: () => [] } },
  directives: { focus },
  setup(props, { emit, slots }) {

    const state = reactive({
      inputValue: '',
      searchValue: '',
    });

    function setItemValue(item) {
      state.inputValue = item.text;
      emit('setItemValue', item.value);
    }
    function searchOptions(value) {
      state.searchValue = value;
    }
    return () => {
      const { placeholder, data } = props;
      const { inputValue, searchValue } = state;
      return (
        <div class="Selector" v-focus>
          <SelectorInput
          placeholder={placeholder}
          modelValue={inputValue} 
          onSearchOptions={searchOptions}
          />
          <SelectorMenu
            data={data}
            onSetItemValue={setItemValue}
            searchValue={searchValue}
            />
        </div>
      )
    }
  }
})
